<script setup>
import { ref, reactive } from "vue";
import { validatePassword, validateEmail } from "@/utils/validate";
import {
  registerApi,
  sendEmailApi,
  verifyCaptchaApi,
  retrieveApi,
} from "@/api/user";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const formRef1 = ref();
const form1 = reactive({
  email: "",
  captcha: "",
});
const formRef2 = ref();
const form2 = reactive({
  password: "",
  password2: "",
});
const rules = {
  email: [{ validator: validateEmail, trigger: "blur" }],
  captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }],
  password: [{ validator: validatePassword, trigger: "blur" }],
  password2: [
    { required: true, message: "请再次输入密码", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value != form2.password) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
};
const step = ref(1);
const sendEmail = async (formEl) => {
  if (!formEl) return;
  await formEl.validateField("email");
  const res = await sendEmailApi({ email: form1.email });
  if (res.data.status === 200) {
    ElMessage({
      message: res.data.message,
      type: "success",
    });
  } else {
    ElMessage({
      message: "验证码发送失败，请重试",
      type: "error",
    });
  }
};
const nextStep = async (formEl) => {
  if (!formEl) return;
  await formEl.validate();
  const res = await verifyCaptchaApi(form1);
  if (res.data.status === 200) {
    step.value = 2;
  } else {
    ElMessage({
      message: res.data.message,
      type: "error",
    });
  }
};
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate();
  const res = await retrieveApi({ ...form1, ...form2 });
  if (res.data.status === 200) {
    ElMessage({
      message: "密码重置成功，即将跳转至登录页……",
      type: "success",
    });
    setTimeout(() => {
      router.replace("/login");
    }, 1000);
  } else {
    ElMessage({
      message: "密码重置失败，请重试",
      type: "error",
    });
  }
};
</script>
<template>
  <div class="page-container">
    <div class="card shadow-sm border-0">
      <div class="d-flex align-items-center text-center">
        <div class="card-body">
          <h4 class="mb-4 h5">
            <RouterLink class="c-pointer text-black-50" to="/login">
              登录
            </RouterLink>
            ·
            <span class="text-primary alert-link">找回密码</span>
          </h4>
          <div>
            <el-form
              v-if="step === 2"
              :model="form2"
              ref="formRef2"
              :rules="rules"
            >
              <el-form-item prop="password">
                <el-input
                  type="password"
                  v-model="form2.password"
                  placeholder="请输入密码"
                />
              </el-form-item>
              <el-form-item prop="password2">
                <el-input
                  type="password"
                  v-model="form2.password2"
                  placeholder="请再次输入密码"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  round
                  class="btn-block"
                  @click="submitForm(formRef2)"
                >
                  提交
                </el-button>
              </el-form-item>
            </el-form>
            <el-form v-else :model="form1" ref="formRef1" :rules="rules">
              <el-form-item prop="email">
                <el-input v-model="form1.email" placeholder="请输入邮箱" />
              </el-form-item>
              <el-form-item prop="captcha" class="captcha">
                <el-input
                  v-model="form1.captcha"
                  placeholder="请输入验证码"
                /><el-button @click="sendEmail(formRef1)">发送验证码</el-button>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  round
                  class="btn-block"
                  @click="nextStep(formRef1)"
                >
                  下一步
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.card {
  width: 350px;
  min-height: 100px;
  margin: 4rem auto 0;
}
.captcha {
  :deep(.el-form-item__content) {
    flex-wrap: nowrap;
  }
}
</style>
